<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>店铺管理</el-breadcrumb-item>
      <el-breadcrumb-item>海报设置</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 轮播图 -->
    <div class="poster">
      <el-carousel :interval="4000" type="card">
        <el-carousel-item v-for="(item, i) in posterList2" :key="i">
          <img :src="item.url" alt="" class="img" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 上传海报 -->
    <div class="btn">
      <el-upload
        class="upload-demo"
        action="http://localhost/poster/uploadPic"
        name="posterImg"
        :on-success="handleAvatarSuccess2"
        :before-upload="beforeAvatarUpload"
        :show-file-list="false"
      >
        <el-button type="primary"
          >上传海报<i class="el-icon-upload el-icon--right"></i
        ></el-button>
      </el-upload>
    </div>

    <!-- 表单 -->
    <el-table
      ref="multipleTable"
      :data="posterList"
      tooltip-effect="dark"
      style="width: 100%"
      border
      stripe
      height="380"
    >
      <el-table-column prop="posterid" label="海报id"> </el-table-column>
      <el-table-column prop="url" label="海报预览">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.url"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="ison" label="状态">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.ison == 0">下架</el-tag>
          <el-tag type="info" v-if="scope.row.ison == 1">上架</el-tag>
        </template>
      </el-table-column>
      <!-- 这里指定了一个宽度，才能撑下三个按钮 -->
      <el-table-column prop="address" label="操作" show-overflow-tooltip>
        <!-- 这里也是使用了 插槽 -->
        <template slot-scope="scope">
          <!-- 编辑按钮 -->
          <el-button
            v-if="scope.row.ison == 1"
            type="primary"
            size="mini"
            @click="editById(scope.row)"
            >下架</el-button
          >
          <el-button
            v-if="scope.row.ison == 0"
            type="primary"
            size="mini"
            @click="editById(scope.row)"
            >上架</el-button
          >
          <!-- 删除按钮 -->
          <el-button type="danger" size="mini" @click="deleteById(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>



<script>
export default {
  data() {
    return {
      posterList: [],
      posterList2: [],
      url: "",
    };
  },
  created() {
    this.getposterList();
    this.getIsOn();
  },
  methods: {
    async getposterList() {
      const { data: res } = await this.$http.get("/poster/getAll");
      console.log(res, "所有海报信息");
      if (res.flag == true) {
        this.posterList = res.data;
      }
    },
    //获取全部已上架海报
    async getIsOn() {
      const { data: res } = await this.$http.get("/poster/getIsOn");
      if (res.flag == true) {
        this.posterList2 = res.data;
      }
    },
    //增加海报
    async addPoster() {
      const { data: res } = await this.$http.post("/poster/add", {
        url: this.url,
        ison: 1,
      });
      if (res.flag == true) {
        this.$message.success("添加海报成功");
        this.getposterList();
        this.getIsOn();
      } else {
        return this.$message.error("添加海报失败");
      }
      console.log(res, "增加海报");
    },
    //这个用来编辑 回显
    handleAvatarSuccess2(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      // console.log(this.imageUrl,"图片")
      this.url = res.data;
      this.addPoster();
      console.log(res, ".......");
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    async editById(row) {
      let ison2 = 0;
      if (row.ison == 0) {
        ison2 = 1;
      }
      if (row.ison == 1) {
        ison2 = 0;
      }

      const { data: res } = await this.$http.put("/poster/update", {
        posterid: row.posterid,
        ison: ison2,
      });
      console.log(res, "编辑海报状态");
      if (res.flag == true) {
        this.$message.success("编辑成功");
        this.getposterList();
        this.getIsOn();
      } else {
        return this.$message.error("编辑失败");
      }
    },
    async deleteById(row) {
      const { data: res } = await this.$http.delete(
        `/poster/delete/${row.posterid}`
      );
      if(res.flag==true){
        this.getposterList()
        this.getIsOn()
        this.$message.success("删除成功")
      }else{
        return this.$message.error("删除失败")
      }
    },
  },
};
</script>

<style scoped>
.poster {
  width: 1400px;
  margin: 0 auto;
}
.img {
  width: 300px;
  height: 350px;
}
.btn {
  margin: 15px 0;
}
</style>